<script setup lang="ts">
import Sidebar from "./components/Sidebar/index.vue";

const appStore = useAppStore();

const sidebarState = computed(() => appStore.sidebar);

const settingsStore = useSettingsStore()

const needTagsView = computed(() => settingsStore.tagsView);

const classObj = computed(() => ({
  'hide-sidebar': !sidebarState.value.opened,
  'open-sidebar': sidebarState.value.opened,
}))
</script>

<template>
  <div :class="classObj" class="app-layout">
    <sidebar />
    <div :class="{ hasTagsView: needTagsView }" class="main-container">
      <slot />
    </div>
  </div>
</template>

<style scoped lang="scss">

</style>